<template>
    <div class="drugContainer">
        <div class="title">症状管理</div>
        <div class="subTitle">
            <div class="pic">
                <img src="../../../../public/商品分类列表.svg" alt="">
                症状列表
            </div>
            <el-button type="primary" @click="dialogFormVisible = true">新增症状</el-button>
            <!-- 新增弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="新增症状" align-center>
                <el-form :model="form">
                    <el-form-item label="症状名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" placeholder="请输入..." />
                    </el-form-item>
                    <el-form-item label="上级症状" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择...">
                            <el-option label="慢性病" value="shanghai" />
                            <el-option label="妇科症状" value="beijing" />
                            <el-option label="过敏/哮喘" value="beijing33" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.desc" autocomplete="off" type="textarea" />
                    </el-form-item>
                    <el-form-item label="是否显示" :label-width="formLabelWidth">
                        <el-radio-group v-model="radio1" class="ml-4">
                            <el-radio label="1" size="large">是</el-radio>
                            <el-radio label="2" size="large">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="" :label-width="formLabelWidth">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitCate">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>


        </div>
        <el-table ref="multipleTableRef" :data="cates" style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="症状名称 " />
            <el-table-column property="grade" label="级别" show-overflow-tooltip sortable />
            <el-table-column property="status" label="状态" show-overflow-tooltip sortable />
            <el-table-column property="roleUpload" label="上传人" show-overflow-tooltip sortable />
            <el-table-column property="desc" label="备注" show-overflow-tooltip sortable />
            <el-table-column label="时间" sortable>
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>


            <!-- 编辑 删除 -->
            <el-table-column property="actions" label="操作" show-overflow-tooltip min-width="100">
                <!-- table子项插槽 用以获取整行的数据 -->
                <template #default="{ row }">

                    <!-- 编辑弹窗 -->
                    <el-button type="primary" @click="dialogFormVisibleEditor = true">编辑</el-button>

                    <el-dialog :modal="false" v-model="dialogFormVisibleEditor" :append-to-body="true" title="编辑症状">
                        <el-form :model="form2">
                            <el-form-item label="症状名称" :label-width="formLabelWidth">
                                <el-input v-model="form2.name" autocomplete="off" placeholder="请输入..." />
                            </el-form-item>
                            <el-form-item label="上级症状" :label-width="formLabelWidth">
                                <el-select v-model="form2.region" placeholder="请选择...">
                                    <el-option label="慢性病" value="shanghai" />
                                    <el-option label="妇科症状" value="beijing" />
                                    <el-option label="过敏/哮喘" value="beijing33" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="备注" :label-width="formLabelWidth">
                                <el-input v-model="form2.desc" autocomplete="off" type="textarea" />
                            </el-form-item>
                            <el-form-item label="是否显示" :label-width="formLabelWidth">
                                <el-radio-group v-model="radio1" class="ml-4">
                                    <el-radio label="1" size="large">是</el-radio>
                                    <el-radio label="2" size="large">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="" :label-width="formLabelWidth">
                                <el-button @click="dialogFormVisibleEditor = false">取消</el-button>
                                <el-button type="primary" @click="updateCate">确定</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>


                    <!-- popconfirm 插槽 包裹需要用到 确认框的 按钮 @confirm确认后的回调 -->
                    <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="不了，谢谢" :icon="InfoFilled"
                        icon-color="#626AEF" title="该操作会彻底删除该分类，确定吗？" @confirm="delDrugCate(row.id)">
                        <!-- popconfirm 插槽 包裹需要用到 确认框的 按钮 -->
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>

                    </el-popconfirm>
                </template>

            </el-table-column>


        </el-table>
        <div style="margin-top: 20px">

            <el-button @click="toggleSelection()" type="primary">清除全选</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>

import { getSymptomLists } from '../../../api/cate'
import { reactive, ref } from 'vue'
import { ElTable, ElMessage } from 'element-plus'
import { deleteDrugCate, postAddDrugICate, putDrugCate } from '../../../api/cate'
import { onMounted } from 'vue';
import { InfoFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';


// 获取症状列表
const cates = ref([]);
const fetchSymptomLists = () => {
    getSymptomLists().then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            cates.value = res.data.data
        }

    })
};

onMounted(() => {
    fetchSymptomLists()
});



const router = useRouter()

// 删除 症状 
const delDrugCate = (id: any) => {
    deleteDrugCate(id).then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success',
                duration: 700,
                onClose: () => {
                    router.go(0)
                }
            })
        }
    })
}


// 新增症状 弹窗
let dialogFormVisible = ref()
const formLabelWidth = '140px'
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
// 单选框
const radio1 = ref('1')

// 新增症状完成 提交  提交成功提示并且关闭弹窗
const updateCate = () => {
    putDrugCate().then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success',
                duration: 700,
                onClose: () => {
                    dialogFormVisible.value = false
                    router.go(0)
                }
            })
        }
    })
};


// 编辑弹窗
let dialogFormVisibleEditor = ref()
const form2 = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
// 编辑症状完成 提交  提交成功提示并且关闭弹窗
const submitCate = () => {
    postAddDrugICate().then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success',
                duration: 700,
                onClose: () => {
                    dialogFormVisible.value = false
                    router.go(0)
                }
            })
        }
    })
};









interface User {
    date: string
    name: string
    grade: string,
    status: string,
    desc: string,
    roleUpload: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
    if (rows) {
        rows.forEach((row) => {
            // TODO: improvement typing when refactor table
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            multipleTableRef.value!.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTableRef.value!.clearSelection()
    }
}
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}


</script>

<style lang="scss" scoped>
.drugContainer {
    padding-top: 15px;
    padding-left: 15px;
}

.title {
    padding-bottom: 15px;
    padding-top: 3px;

    font-size: 30px;
    font-weight: bold;

}

.subTitle {
    margin: 0 0 20px;
    display: flex;
    justify-content: space-between;
    background-color: #F2F2F2;
    height: 45px;


    .pic {
        display: flex;
        align-items: center;

        img {
            width: 25px;
            height: 25px;
            padding-right: 10px;
        }
    }

    .el-button {
        margin-right: 140px;
        margin-top: 7px;

        border-color: red;
        background-color: #fff;
        color: black;
    }
}
</style>